import { useRef } from 'react'
import styles from './scss/fileInuputBox.module.scss'

interface Props {
  onFileChange?: (file: File) => void
  show: boolean
}

export const FileInputBox = (props: Props) => {
  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <div
      className={`${styles['file-input-box']}${
        !props.show ? ` ${styles['file-input-box-hide']}` : ''
      }`}>
      <div className={styles['file-inpue-inner']}>
        <input
          type="file"
          accept="image/gif"
          ref={inputRef}
          style={{ display: 'none' }}
          onChange={(e) => {
            if (e.target.files && e.target.files.length > 0) {
              props.onFileChange?.(e.target.files[0])
            }
          }}
        />
        <p>可将GIF拆分每一帧的图片</p>
        <button
          className={styles['btn']}
          onClick={() => inputRef.current?.click()}>
          点击上传GIF
        </button>
      </div>
    </div>
  )
}
